<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WIFI传输</title>
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="res/sky_v2/sky.source.js?_v122"></script>
</head>
<body>
<div class="wrap">
    <div class="imgs">
        <img src="img/iconComputer.png">
        <img class="let-center" src="img/iconTransmit.png">
        <img src="img/iconMobile.png">
    </div>
    <div class="base-bg" id="upload-drop">
        <div id="contnetBody" class="top-bg">
            <p class="drag" id="decr">drag &amp; drop here</p>
            <ul id="list"></ul>
        </div>
        <label class="button" id="upload"></label>
        <a class="words">select files</a>
    </div>
</div>
<p class="slogan">PROVIDED BY OX PLAYER</p>
<script type="text/javascript">
    require(['sky/data/comm','sky/dom/dom','sky/data/upload','util'],function($C,$,upload,U){
        var E = require('emitter');
        var isUpingId = '';
        var up1 = upload.create('upload.do');
        up1.accept = ["3g2", "3gp", "3gp2", "3gpp", "amv", "asf", "avi", "divx", "drc", "dv",
            "f4v", "flv", "gvi", "gxf", "ismv", "iso", "m1v", "m2v", "m2t", "m2ts",
            "m4v", "mkv", "mov", "mp2", "mp2v", "mp4", "mp4v", "mpe", "mpeg",
            "mpeg1", "mpeg2", "mpeg4", "mpg", "mpv2", "mts", "mtv", "mxf", "mxg",
            "nsv", "nut", "nuv", "ogm", "ogv", "ogx", "ps", "rec", "rm", "rmvb",
            "tod", "ts", "tts", "vob", "vro", "webm", "wm", "wmv", "wtv", "xesc"];
        up1.inputAccept = 'video/*';
        up1.create('upload');
        function startUp(){
            if(isUpingId){
                return ;
            }
            var d = $.get('#list > li[end=0]')[0]
            if(d){
                isUpingId = d.id;
                up1.submit(isUpingId);
            }
        }
        function Delete(id){
            var p = $(id);
            p.parentNode.removeChild(p);
            up1.cancel(id);
            if(id == isUpingId){
                isUpingId = '';
                startUp();
            }
            var d = $.get('#list > li[end=0]')[0]
            if(!d){
                $.show("contnetBody");
                $.hide("list");
                $.removeClass('upload-drop',"content1");
                $.show("decr");
            }
        }
        up1.on('progress',function(id,pre){
            $.html('p-' + id,pre);
            $.css('z-' + id,'width' , pre+'%');

        });
        up1.on('complete',function(id,backData){
            //console.log(this, id, backData);
            $.html('p-' + id,String(backData));
            isUpingId = '';
            $(id).setAttribute('end','1');
            startUp();
            $.get("start").show();
            $.html('icon-' + id, '<img src="img/icon_done.png" class="over">');
            setTimeout(function(){
                // U.bind(Delete,null,id);
                Delete(id);
                var obj_lis = document.querySelectorAll("#list li");
                if (!obj_lis.length){
                    $.show("contnetBody");
                    $.hide("list");
                    $.removeClass('upload-drop',"content1");
                    $.show("decr");
                }
            },2000);
            if(backData==""){
                alert("connect has been break off")
            }

        })
        up1.on('select',function(ls){
            U.forEach(ls,function(id){
                var v = up1.get(id);
                if(v.valid){
                    $.create('li',
                            {id:id,end:'0'},
                            '<img src="img/icon_drop_file.png" class="start">' +
                            "<div class='qq'><div class='z'></div><div class='ttt'>"+v.name+"</div>"+ '' +
                            '<div id="z-' + id + '" style="width: ;" class="zero">' + '<b id="p-' + id + '" style="text-align: center"></b></div></div>' +
                            '<var sky-live-fn="remove" sky-live-data="' + id + '" id="icon-' + id + '">'
                            + '<img src="img/icon_close.png" class="dele"></var>', 'list');

                    $.hide("decr");
                }else{
                    alert("格式不符合！")
                }
            });
            startUp();
            $.show("list")
        });
        up1.setDrop('upload-drop');
        $.live('list',{
            remove:function(id){
                if(this.innerHTML.indexOf('class="dele"') > 0){
                    Delete(id);
                }
            }
        });



    });
</script>

</body>
</html>